<!-- 音标专练列表 -->

<template>
	<AppHeader title="音标专练" :banAnimate="true" titleColor="#000" @leftClickEvent="onClickLeft()">
	</AppHeader>
	<div class="container">
		<div class="container-height"></div>
		<div class="container-list" v-for="item in phoneticPracticeList" :key="item.title">
			<div class="container-list-top">{{item.title}}</div>
			<div class="container-list-bottom">
				<div @click="goDetail(data.versionId)" v-for="data in item.phoneticList" :key="data.id">
					[{{data.symbols}}]</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import AppHeader from '@/components/AppHeader.vue'
	import {
		onMounted,
		reactive,
		toRefs
	} from 'vue'
	import {
		getPhoneticPracticeList,
	} from '@/api/phoneticPractice'

	const route = useRoute()
	const state = reactive({
		phoneticPracticeList: []
	});
	onMounted(async () => {
		if (route.query.token) { //安卓ios跳转token放在路由上
			localStorage.setItem("h5-token", route.query.token);
		}
		state.phoneticPracticeList = await getList();
	})

	//获取音标列表
	const getList = () => {
		getPhoneticPracticeList().then(res => {
			if (res.code == 1) {
				let phoneticList = []
				for (const key in res.data) {
					phoneticList.push({
						title: key,
						phoneticList: res.data[key]
					})
				}
				state.phoneticPracticeList = phoneticList
			}
		})
	}

	//跳转音标详情
	const router = useRouter()
	const goDetail = (versionId) => {
		router.push({
			path: '/phoneticPractice/detail',
			query: {
				versionId: versionId
			}
		})
	}
	//返回上一页
	const onClickLeft = () => {
		var u = navigator.userAgent;
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
		var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		if (isAndroid) {
			window.android.goBack();
		} else if (isiOS) {
			window.webkit.messageHandlers.back.postMessage("")
		}
	}
	const {
		phoneticPracticeList
	} = toRefs(state)
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		// height: 100vh;
		background: #F6F6F6;
		display: flex;
		flex-direction: column;
		align-items: center;

		.container-height {
			height: 44px;
		}

		.container-list {
			margin-top: 10px;
			background: #FFFFFF;
			width: 355px;
			height: 108px;
			display: flex;
			flex-direction: column;
			border-radius: 15px;

			.container-list-top {
				font-size: 16px;
				font-weight: bold;
				margin: 10px 0 0 10px;
				color: #333333;
			}

			.container-list-bottom {
				display: flex;

				div {
					margin-top: 15px;
					margin-left: 10px;
					height: 46px;
					width: 46px;
					border-radius: 10px;
					background: #0CB76C;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 18px;
					color: #FFFFFF;
				}
			}
		}
	}
</style>